<template>
  <div class="cml-theme-add">
    <ul class="add-theme-params-list">
      <li class="add-theme-params-item">
        <span class="params-name">{{ $t('cmlpanel.hue') }}<i></i></span>
        <span class="params-slider">
          <a-slider
            :min="0"
            :max="360"
            v-model="filterCopy.hueRotate"
            :tipFormatter="hueFormatter"
          ></a-slider>
        </span>
        <span class="params-value"
          ><i class="value">{{ filterCopy.hueRotate }}</i
          ><i class="unit">°</i></span
        >
      </li>
      <li class="add-theme-params-item">
        <span class="params-name">{{ $t('cmlpanel.saturate') }}<i></i></span>
        <span class="params-slider">
          <a-slider
            :min="0"
            :max="300"
            v-model="filterCopy.saturate"
          ></a-slider>
        </span>
        <span class="params-value"
          ><i class="value">{{ filterCopy.saturate }}</i
          ><i class="unit">%</i></span
        >
      </li>
      <li class="add-theme-params-item">
        <span class="params-name">{{ $t('cmlpanel.brightness') }}<i></i></span>
        <span class="params-slider">
          <a-slider
            :min="0"
            :max="300"
            v-model="filterCopy.brightness"
          ></a-slider>
        </span>
        <span class="params-value"
          ><i class="value">{{ filterCopy.brightness }}</i
          ><i class="unit">%</i></span
        >
      </li>
      <li class="add-theme-params-item">
        <span class="params-name">{{ $t('cmlpanel.contrast') }}<i></i></span>
        <span class="params-slider">
          <a-slider
            :min="0"
            :max="200"
            v-model="filterCopy.contrast"
          ></a-slider>
        </span>
        <span class="params-value"
          ><i class="value">{{ filterCopy.contrast }}</i
          ><i class="unit">%</i></span
        >
      </li>
      <li class="add-theme-params-item">
        <span class="params-name">{{ $t('cmlpanel.opacity') }}<i></i></span>
        <span class="params-slider">
          <a-slider :min="0" :max="100" v-model="filterCopy.opacity"></a-slider>
        </span>
        <span class="params-value"
          ><i class="value">{{ filterCopy.opacity }}</i
          ><i class="unit">%</i></span
        >
      </li>
      <li class="add-theme-params-item">
        <span class="params-name">{{ $t('cmlpanel.grayscale') }}<i></i></span>
        <span class="params-slider">
          <a-slider
            :min="0"
            :max="100"
            v-model="filterCopy.grayscale"
          ></a-slider>
        </span>
        <span class="params-value"
          ><i class="value">{{ filterCopy.grayscale }}</i
          ><i class="unit">%</i></span
        >
      </li>
      <li class="add-theme-params-item">
        <span class="params-name">{{ $t('cmlpanel.invert') }}<i></i></span>
        <span class="params-slider">
          <a-slider :min="0" :max="100" v-model="filterCopy.invert"></a-slider>
        </span>
        <span class="params-value"
          ><i class="value">{{ filterCopy.invert }}</i
          ><i class="unit">%</i></span
        >
      </li>
    </ul>
    <div class="save-theme-btn">
      <button @click="randomTheme">{{ $t('cmlpanel.random') }}</button>
      <button @click="saveTheme">{{ $t('cmlpanel.save') }}</button>
    </div>
  </div>
</template>
<script>
import { Slider } from 'ant-design-vue'

export default {
  name: 'ThemeAdd',
  components: {
    ASlider: Slider
  },
  model: {},
  props: {
    filters: {
      type: Object,
      default: () => ({
        opacity: 100,
        brightness: 100, // 亮度
        contrast: 100, // 对比度
        grayscale: 0, // 灰度
        hueRotate: 0, // 色相
        invert: 0, // 反向
        saturate: 100, // 饱和度
        sepia: 0 // 褐色
      })
    },
    mode: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      filterCopy: {}
    }
  },
  computed: {},
  watch: {
    filterCopy: {
      handler: function (val) {
        // 不同步父组件的数据
        this.$emit('change', val)
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    // 复制一份数据 不去改变父组件的数据
    this.filterCopy = this.copy(this.filters)
  },
  beforeDestroy() {},
  methods: {
    copy({ ...rest }) {
      return { ...rest }
    },
    // 色相旋转单位
    hueFormatter(value) {
      return value + 'deg'
    },
    randomFrom(lowerValue, upperValue) {
      return Math.floor(
        Math.random() * (upperValue - lowerValue + 1) + lowerValue
      )
    },
    // 随机主题
    randomTheme() {
      for (const key in this.filterCopy) {
        switch (key) {
          case 'brightness':
            this.filterCopy[key] = this.randomFrom(50, 150)
            break
          case 'saturate':
            this.filterCopy[key] = this.randomFrom(0, 300)
            break
          case 'hueRotate':
            this.filterCopy[key] = this.randomFrom(0, 360)
            break
          case 'contrast':
            this.filterCopy[key] = this.randomFrom(100, 150)
            break
        }
      }
    },
    // 保存主题
    saveTheme() {
      this.$emit('save', this.filterCopy)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/panel-var.scss';
.cml-theme-add {
  // margin-top: 20px;
  border-radius: 2px;
  overflow: hidden;

  background-color: #232732;
  .add-theme-params-list {
    padding: 10px 0;
    font-size: $fz-ssm;
    .add-theme-params-item {
      display: flex;
      align-items: center;
      .params-name {
        display: inline-block;

        width: 64px;
        height: 18px;
        padding: 0 10px;

        text-align: justify;
        vertical-align: top;
        i {
          display: inline-block;

          width: 100%;
          height: 0;
        }
      }
      .params-slider {
        flex: 1;
      }
      .params-value {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        width: 48px;
        padding: 0 8px 0 5px;
        .unit {
          padding-left: 2px;
        }
      }
    }
  }

  .save-theme-btn {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid $line-color;
    button {
      color: $text-color;
      transition: all ease 0.2s;
      border: none;
      background-color: transparent;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      &:hover {
        color: $text-active-color;
      }
      &:nth-child(1) {
        border-right: 1px solid $line-color;
      }
    }
  }
}
</style>
